<script setup lang="ts">
import { h, reactive, ref } from 'vue';
import Nifi from '../../nifi';
import { ElSteps, ElStep, vLoading, ElMessage,ElButton } from "element-plus"
import {t} from "../../i18n/index"

const emits = defineEmits<{finish:[boolean]}>()
const { nifi, id } = defineProps<{ id: string, nifi: Nifi }>()


const loading = ref(true)
const active = ref(0)
const data = reactive<any>({})
const errMsg = ref("")
let referencingComponentRevisions:any = {}
nifi.ControlService.detail(id).then((res) => {
    if (res !== false) {
        Object.assign(data, res);
    }
    for(const d of res.component.referencingComponents){
        referencingComponentRevisions[d.id] = {version:d.revision.version,clientId:nifi.flow.clientId}
    }
    loading.value = false;
    //
    init();
})
//

// 停止运行引用服务
const seStatus = ref<''|'wait'|'success'|"error">('')
const stopService = async () => {
    active.value = 0;
    //
    seStatus.value = 'wait'
    const url = `/nifi-api/controller-services/${id}/references`
    await new Promise((resolve) => setTimeout(() => resolve(true), 500));
    try {
        await nifi.api.put(url, { id, "state": "STOPPED", referencingComponentRevisions, "disconnectedNodeAcknowledged": false, "uiOnly": true })
        seStatus.value = 'success'
        return true;
    } catch (error) {
        errMsg.value = error + '';
        ElMessage.error(t('cs-stop-server-failed',{error}))
        seStatus.value = 'error'
        return false;
    }
}

// 禁用引用服务
const rsStatus = ref<''|'wait'|'success'|"error">('')
const disableService = async () => {
    active.value = 1;
    rsStatus.value = 'wait'
    const url = `/nifi-api/controller-services/${id}/references`
    await new Promise((resolve) => setTimeout(() => resolve(true), 500));
    try {
        await nifi.api.put(url, { id, "state": "DISABLED", referencingComponentRevisions:{}, "disconnectedNodeAcknowledged": false, "uiOnly": true })
        rsStatus.value = 'success'
        return true;
    } catch (error) {
        errMsg.value = error + '';
        ElMessage.error(t('cs-stop-server-disable-failed',{error}))
        rsStatus.value = 'error'
        return false;
    }
}
// 禁用控制器服务
const csStatus = ref<''|'wait'|'success'|"error">('')
const disableCS = async () => {
    active.value = 2;
    csStatus.value = 'wait'
    const url = `/nifi-api/controller-services/${id}/run-status`;
    await new Promise((resolve) => setTimeout(() => resolve(true), 500));
    try {
        await nifi.api.put(url, { revision: data.revision, "disconnectedNodeAcknowledged": false, "state": "DISABLED", "uiOnly": true })
        csStatus.value = 'success'
        return true;
    } catch (error) {
        errMsg.value = error + '';
        ElMessage.error(t('cs-stop-disable-failed',{error})) // t('',{error})
        csStatus.value = 'error'
        return false;
    }
}

const initLoading = ref(false)

const init = async () => {
    initLoading.value = true;
    let bool = true;
    bool = await stopService();
    //
    bool && (bool = await disableService());
    //
    bool && (bool = await disableCS());
    //
    initLoading.value = false;
    //
    emits('finish',bool)
}

const loadingIcon = h('div',{class:"i-line-md:loading-alt-loop w-1em h-1em"})

</script>

<template>
    <div v-loading="loading" class="p-8px backdrop-blur-md relative w-800px">
        <el-steps class="w-full" :space="500" :active="active" align-center>
            <el-step :title="t('cs-stop-step-1')" :status="seStatus" :icon="seStatus == 'wait' ? loadingIcon : undefined" />
            <el-step :title="t('cs-stop-step-2')" :status="rsStatus" :icon="rsStatus == 'wait' ? loadingIcon : undefined" />
            <el-step :title="t('cs-stop-step-3')" :status="csStatus" :icon="csStatus == 'wait' ? loadingIcon : undefined"  />
        </el-steps>
        <div v-if="errMsg" class="w-full box-border p-8px rd-8px b-1px b-solid m-y-16px c-#f56c6c b-#f56c6c bg-#fef0f0">
            {{ errMsg }}
        </div>
        <div v-if="errMsg" class="w-full flex justify-center">
            <ElButton type="info" plain @click="emits('finish',true)">关闭</ElButton>
        </div>
    </div>
</template>